<template>
  <div class="wrapper">
    <el-tabs v-model="activeName" type="border-card" @tab-click="getDataInfo">
      <el-tab-pane v-loading="loading" label="出车提示信息" name="a">
        <el-form size="small" style="width: 600px;">
          <el-form-item label="标题">
            <el-input v-model="aFrom.title"></el-input>
          </el-form-item>
          <el-form-item label="内容">
            <el-input v-model="aFrom.content" type="textarea" :autosize="{ minRows: 8, maxRows: 15}"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="合同有效期提示内容" name="b">
        <el-radio-group v-model="bFrom.type" @input="getDataInfo">
          <el-radio label="1">驾驶员</el-radio>
          <el-radio label="2">押运员</el-radio>
        </el-radio-group>
        <el-form size="small" style="width: 600px;">
          <el-form-item label="提示内容">
            <el-input v-model="bFrom.content" type="textarea" :autosize="{ minRows: 4, maxRows: 8}"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {Query_chucheInfo, update_chucheInfo, Query_hetongdataInfo, update_hetongdataInfo} from "@/api"

export default {
  name: "settings",
  data() {
    return {
      activeName: "a",
      loading: true,
      aFrom: {
        title: "",
        content: ""
      },
      bFrom: {
        type: "1",
        content: ""
      },
    }
  },
  methods: {
    onSubmit() {
      this.loading = true;
      switch (this.activeName) {
        case "a":
          update_chucheInfo({
            ...this.aFrom,
            Title: this.aFrom.title
          }).then(res => {
            console.log(res)
            if (res.msg.indexOf("成功") >= 0) {
              this.$message.success('保存成功')
            } else {
              this.$message.error('保存失败')
            }
            this.loading = false;

          })
          break
        case "b":
          update_hetongdataInfo({
            ...this.bFrom
          }).then(res => {
            console.log(res)
            if (res.msg.indexOf("成功") >= 0) {
              this.$message.success('保存成功')
            } else {
              this.$message.error('保存失败')
            }
            this.loading = false;

          })
          break
      }
    },
    // 根据name值获取值
    getDataInfo() {
      this.loading = true;
      switch (this.activeName) {
        case "a":
          Query_chucheInfo().then(res => {
            console.log(res)
            this.aFrom = res;
            this.loading = false;
          })
          break;
        case "b":
          Query_hetongdataInfo({
            type: this.bFrom.type
          }).then(res => {
            console.log(res)
            this.bFrom.content = res.tip;
            this.loading = false;
          })
          break;
      }
    }
  },
  mounted() {
    this.getDataInfo();
  }
}
</script>

<style lang="scss" scoped>
.table-avatar {
  width: 40px;
  height: 40px;
}

::v-deep .image-table-slot {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eee;
}

.wrapper {
  margin: 20px;

  .label {
    font-size: 14px;
    color: #333;
    padding-bottom: 10px;
  }
}

::v-deep .el-dialog__header {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

::v-deep .el-dialog__body {
  padding: 10px 20px;
}

.formRow {

  &.disabled {
    pointer-events: none;
  }


  .el-col {
    padding: 8px 0;

    .label {
      font-weight: 500;
      margin-right: 10px;
      color: #444;
    }

    .headimg_view {
      margin-left: 50%;
      transform: translateX(-50%);
      overflow: hidden;

      .avatar {
        width: 120px;
        height: 120px;
        font-size: 0;
      }

      ::v-deep .image-slot {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-color: #eee;

        .iocn {
          font-size: 20px;
        }

        span {
          font-size: 14px;
        }
      }
    }
  }

  .sourceList {
    .item {
      padding: 10px;
      background-color: #f8f8f8;
      border-bottom: 1px solid #ddd;

      &:last-child {
        border-bottom: 0;
      }

      .box {
        padding: 5px 0;
        display: flex;

        .label {
          color: #666;
          padding-right: 20px;
        }
      }
    }
  }
}

.dataList {
  margin-bottom: 20px;

  .desc {
    margin-top: 10px;
    color: #888;
  }

  .dataTitle {
    font-weight: 500;
    color: #333;
  }
}

//::v-deep .el-form-item__label {
//  width: 100%;
//}

.flex {
  display: flex;

  span {
    b {
      color: #f46162;
    }
  }

  &.between {
    justify-content: space-between;
  }
}
</style>
